<!DOCTYPE html>
<html>
    <head>
        <title>HTML is awesome</title>
        <style>
            header {
                color:rgb(245, 250, 245);
                padding:25px;
                background:rgb(132, 84, 194);
            }
            #title {
                color:red;
            }


            section {
                background-color: rgb(224, 158, 71);
                padding:50px;
                margin:20px;
            }

         
            article {
                background-color: rgb(125, 125, 200);
                color:white;
                font-size:18px;
                padding:20px;
                line-height: 150%;
                border-radius:5px;
            }
            .box{
                display: inline-block;
                width:250px;
                height:250px;
                margin-bottom:5px;
                font-size:90px;
                text-align: center;
                line-height: 250px;
                border-radius: 50%
      
            }
            #box-1{
                background:rgb(141, 245, 141);
            }
            #box-2{
                background:rgb(236, 236, 107);
            }
          #box-3{
              background:rgb(236, 128, 128);
          }

            

        </style>
    </head>
    <body>

        <header>
            <div id='top'>
                <h1 id="title">Web Development</h1>
                <ul>
                    <li><a href ='#introduction-to-html'>HTML</a></li>
                    <li><a href='#css'>CSS</a></li>
                    <li><a href ='#js'>JavaScript<a></li>
                </ul>
                <a href="#down">Down</a>
            </div>
        </header>

        <main>
            <section id='introduction-to-html'>
                <h1>Introduction HTML</h1>
                <article>
                    <p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Fugiat assumenda exercitationem placeat voluptas in vero soluta temporibus eveniet harum impedit asperiores libero saepe, maiores alias voluptatibus sapiente vitae laudantium quam!
                        Ipsa adipisci velit necessitatibus fuga tempora placeat nam perferendis accusantium nemo eos rem voluptatum ex, consequuntur quos, suscipit facilis quas hic quo exercitationem ullam illo voluptate blanditiis autem? Beatae, laboriosam.
                        Perspiciatis nisi ipsa necessitatibus velit asperiores numquam eius ducimus aperiam debitis aliquid consequatur similique beatae iusto ut dolore at dolorum, saepe voluptates? Molestiae, minima ipsum iusto veritatis quo tenetur at.</p>
                        <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Aut fugiat ipsa neque saepe quod eos consequuntur atque esse tempora est obcaecati, numquam debitis nemo fugit possimus sit ullam animi. Voluptatem?
                        Fugit in labore ipsa possimus consequuntur, nesciunt esse officiis explicabo aperiam earum rerum ipsum repellat sit neque similique ea, corrupti eos unde est expedita quos necessitatibus perferendis totam. Quaerat, reiciendis?
                        Iste ex, omnis eligendi tempore quis aut voluptate officiis, debitis et ipsam quaerat, iure voluptatibus sapiente consequuntur aliquam vitae quidem repellat maiores! Maxime et, non laboriosam accusantium sapiente dignissimos quibusdam.
                        Ea beatae ullam dolorum quibusdam consequatur consectetur vero similique odio velit? Libero molestias, excepturi repellat doloremque modi numquam mollitia eos facilis aliquid necessitatibus ipsa nostrum delectus laudantium, quam molestiae veniam!
                        Rerum maiores quos, neque, laboriosam labore sapiente nemo aliquam et enim omnis ab rem laudantium temporibus quod distinctio quo, nostrum inventore. Culpa enim expedita excepturi harum accusamus fuga rerum reiciendis.</p>
                        <p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Esse modi repellendus sapiente voluptatem odit ea, dolores nesciunt nulla quis labore animi deleniti voluptatibus quisquam veniam cumque quasi pariatur itaque illo.
                        Quod soluta rerum dignissimos voluptatibus accusamus voluptatum quas illo. Blanditiis accusantium quos minima impedit eius, aut, nemo cum ratione velit temporibus incidunt quisquam magni recusandae quaerat dignissimos harum dolore aliquid.
                        Excepturi tempore voluptatem tempora id odio iste eius facilis consectetur sit autem ratione expedita magni aliquam obcaecati totam eligendi, illo quis voluptate a illum eum? At quasi pariatur delectus sapiente?
                        Soluta aperiam debitis laborum officiis ex atque esse blanditiis nulla beatae optio quae vero distinctio, illum nobis pariatur aliquid? Perferendis enim nisi officiis doloribus expedita est vel et a temporibus?
                        Reprehenderit similique corrupti blanditiis quos nostrum nisi omnis perferendis enim illo est beatae dicta maxime ad inventore quaerat excepturi ducimus accusamus voluptatibus fugit ea expedita, provident iste! Aspernatur, quas. Quisquam?</p>

                        <img src = './assets/images/html.png' alt ='HTML Logo'/>
                

                </article>
            </section>
          
            <section id='css'>
                <h1>Introduction CSS</h1>
                <article>
                    <p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Aperiam deleniti, magni, vero tempora nam culpa ex amet iste ut magnam nobis vitae laboriosam provident rerum omnis, repudiandae natus optio quia reprehenderit non ad ipsum possimus. Excepturi asperiores accusamus aspernatur aliquid quos odio dicta neque velit fuga. Dolorum, nobis. Inventore nobis ad repellat molestias. Esse voluptatum natus rerum aliquid, animi dolores beatae voluptas. Porro, officia soluta in enim unde odit. Harum dolore impedit ipsam beatae adipisci repudiandae, modi deserunt, aspernatur, distinctio omnis fugiat velit.</p>
                    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Reiciendis quia ducimus iusto provident ad cupiditate. Quia numquam qui et iusto deleniti alias debitis culpa omnis, accusamus nostrum delectus quo odit!
                    Nihil atque voluptatum nesciunt accusantium nisi quo dicta sapiente, molestiae doloribus possimus dolorum quod enim consequuntur, officia laboriosam! Maxime dolorem ratione animi. Molestiae dolore reiciendis animi, cupiditate incidunt nostrum atque!
                    Quisquam, voluptatum enim. Iusto delectus corrupti eveniet voluptatibus inventore voluptate veritatis ut vero eum sapiente! Excepturi maiores officiis error ad commodi dolor doloremque natus officia, tenetur sit assumenda, deserunt ab!</p>
                    <img src='./assets/images/css_logo.png' alt ='CSS Logo'/>
                    </article>
                </section>

            <section id='js'>
                <h1>Introduction JavaScript</h1>
                <article>
                    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Distinctio suscipit soluta possimus non praesentium veritatis ab nostrum doloremque, commodi perferendis consectetur laudantium ullam dolorem eos neque mollitia accusamus ipsa ex!
                    Illum repellat iure error adipisci dicta natus mollitia ipsum commodi ea, sequi, accusamus repellendus, vitae perspiciatis dolor eveniet itaque reiciendis voluptates quaerat ex nesciunt dignissimos ducimus? Dolorum officia eius voluptate!
                    Obcaecati, inventore magni eveniet illo eligendi ipsa nobis iusto consequatur magnam sapiente laborum omnis soluta iste maiores voluptatum mollitia facere. Molestiae, dolor officia! Molestias accusamus iure temporibus minima, veniam at?
                    Reiciendis atque aliquid nihil alias fuga eligendi adipisci suscipit iste velit praesentium, commodi placeat fugiat modi dolorum inventore quasi reprehenderit a voluptas sint laborum! Eaque aliquid saepe ea tenetur labore?
                    Perspiciatis, necessitatibus harum! Dolor consectetur fuga inventore repudiandae cumque necessitatibus nemo corporis maxime delectus distinctio iusto, exercitationem repellendus suscipit laboriosam unde labore odit nobis? Libero voluptatem soluta corporis non quo?</p>
                    <img src='./assets/images/js_logo.png' alt='JavaScript Logo' />
                    </article>
                </section>

                <section>
                    <h1>Podcasts</h1>
                    <article>
                        <div>
                            <h2>Podcast 1: Let's about how to embed audio using HTML</h2>
                            <audio src="./assets/audios/audio_1.mp3" controls></audio>
                        </div>
                        <div>
                            <h2>Podcast 2: Let's about how to embed audio using HTML</h2>
                            <audio src="./assets/audios/audio_2.mp3" controls></audio>
                        </div>
                      
                    </article>
                </section>
                <section>
                    <h1>Videos</h1>
                    <article>
                        <video src="./assets/videos/js-project.mp4" controls width="100%"></video>
                    </article>
                </section>

          
                <div class="box" id ="box-1">1</div>
                <div class="box" id="box-2">2</div>
                <div class="box" id="box-3">3</div>


            <div id='down'>
                <a href="#top">Top</a>
            </div>
           <!--
               Two types of elements:
               1. Block elements
               2. Non-blocking elements
           -->
    
        </main>

        <footer>
            <p>Copyright 2021 by Asabeneh Yetayeh</p>
            <div>
                <a href='https://github.com/Asabeneh' target="_blank">GitHub</a>
                <a href='https://www.linkedin.com/in/asabeneh/' target="_blank">LinkedIn</a>
                <a href='https://twitter.com/Asabeneh' target="_blank">Twitter</a>
            </div>
        </footer>
       
    </body>
</html>